<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Link & Go</title>
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <link href="./css/record.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <img src="./images/logo.png" class="logo">
        <div class="btn-area">
            <button class="btn" id="new_game_btn">New Game</button>
            <button class="btn" id="load_game_btn">Load Game</button>
            <a href="./01_Ranking_Page.html" class="btn">Ranking</a>
        </div>
    </div>
    <div class="modal-box" id="input_nickname_modal">
        <div class="modal">
            <div class="title">Input your nickname</div>
            <input class="input" id="nickname_input">
            <button class="btn submit-btn" id="submit_input_btn">Submit</button>
        </div>
    </div>
    <div class="modal-box" id="record_modal">
        <div class="modal">
            <div class="title">Record</div>
            <div class="body">
                <div class="item" id="record_list_item_template">
                    <div class="">
                        <span class="nickname">Nickname</span>
                    </div>
                    <div>
                        <span>Level:<span class="level"></span></span>
                        <span>Wallet:<span class="wallet"></span></span>
                    </div>
                    <div class="submit_at">submit_at</div>
                </div>
                <div class="list" id="records_list">
                    <div class="not-have-data">Not has record yet</div>
                </div>
            </div>
        </div>
    </div>
    <div id="message_box">
        <div id="message_content"></div>
    </div>

<script src="./js/element.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<script src="./js/record.js"></script>
</body>
</html>